﻿<!-- #layout name=noMenu --sideType='domain'-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title"><span>Domain binding</span>: {{model.rootDomain}} </h1>
  </div>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" @click="showNewBindingModal=true"
        ><span>New</span> <i class="fa fa-plus"></i
      ></a>
      <a v-show="selected.length" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="domains" show-select :selected.sync="selected">
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="fullName"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.site.domain.site">
      <template v-slot="row">
        <a
          class="btn btn-link"
          :title="Kooboo.text.common.edit"
          :href="Kooboo.Route.Get(Kooboo.Route.Site.DetailPage, {SiteId:row.webSiteId})"
          target="_blank"
          >{{row.siteName}}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column align="right" width="100px">
      <template v-slot="row">
        <a class="btn btn-ms blue" :href="'//' + row.fullName" target="_blank"
          >{{Kooboo.text.common.preview}}</a
        >
      </template>
    </kb-table-column>
  </kb-table>

  <div
    class="modal fade"
    data-backdrop="static"
    v-kb-modal="showNewBindingModal"
  >
    <div class="modal-dialog" v-if="showNewBindingModal">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">New binding</h4>
        </div>
        <div class="modal-body">
          <kb-form
            simple
            class="form-horizontal"
            :model="model"
            :rules="rules"
            ref="form"
          >
            <kb-form-item prop="SubDomain" class="form-group" v-slot="error">
              <div :class="{'has-error': error.error}">
                <label class="col-md-3 control-label" for="SubDomain"
                  >Record</label
                >
                <div class="col-md-9">
                  <div
                    class="input-group input-large"
                    v-kb-tooltip:right.manual.error="error.error"
                  >
                    <input
                      class="form-control form-control"
                      id="SubDomain"
                      name="SubDomain"
                      placeholder="example: www"
                      type="text"
                      v-model="model.SubDomain"
                    />
                    <span
                      class="input-group-addon"
                      style="max-width: 200px; overflow: hidden;"
                      >.{{model.RootDomain}}</span
                    >
                  </div>
                </div>
              </div>
            </kb-form-item>
            <kb-form-item class="form-group">
              <label class="col-md-3 control-label" for="WebSiteId">Site</label>
              <div class="col-md-9">
                <select
                  class="form-control input-large"
                  name="WebSiteId"
                  v-model="model.SiteId"
                >
                  <option
                    v-for="item in sites"
                    :key="item.siteId"
                    :value="item.siteId"
                  >
                    {{item.siteDisplayName}}
                  </option>
                </select>
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button @click="save" class="btn green">Add</button>
          <button data-dismiss="modal" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);

    var self = new Vue({
      el: "#app",
      data: function() {
        return {
          domains: [],
          selected: [],
          sites: [],
          showNewBindingModal: false,
          model: {
            SubDomain: "",
            RootDomain: "",
            SiteId: ""
          },
          rules: {
            SubDomain: [
              { required: Kooboo.text.validation.required },
              {
                pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
                message: Kooboo.text.validation.objectNameRegex
              },
              {
                min: 1,
                max: 63,
                message:
                  Kooboo.text.validation.minLength +
                  1 +
                  ", " +
                  Kooboo.text.validation.maxLength +
                  63
              },
              {
                validate: function(value) {
                  return self.domains.every(function(e) {
                    return e.subDomain != value;
                  });
                },
                message: Kooboo.text.validation.taken
              }
            ]
          }
        };
      },
      mounted: function() {
        var self = this;
        Kooboo.Domain.get({
          id: Kooboo.getQueryString("id")
        }).then(function(res) {
          if (res.success) {
            self.model.RootDomain = res.model.domainName;
            Kooboo.Site.getList().then(function(data) {
              self.sites = data.model;
              if (self.sites.length) {
                self.model.SiteId = self.sites[0].siteId;
              }
              self.getList();
            });
          }
        });
      },
      methods: {
        onShowModal: function() {},
        save: function() {
          if (!self.$refs.form.validate()) return;
          Kooboo.Binding.post(this.model).then(function(res) {
            if (res.success) {
              self.getList();
              self.showNewBindingModal = false;
            }
          });
        },
        onDelete: function() {
          var ids = this.selected.map(function(m) {
            return m.id;
          });

          if (!confirm(Kooboo.text.confirm.deleteItems)) return;

          Kooboo[Kooboo.Binding.name]
            .Deletes({
              ids: ids
            })
            .then(function(res) {
              if (res.success) {
                self.getList();
                window.info.done(Kooboo.text.info.delete.success);
              } else {
                window.info.done(Kooboo.text.info.delete.fail);
              }
            });
        },
        getList: function() {
          Kooboo.Binding.ListByDomain({
            domainid: Kooboo.getQueryString("id")
          }).then(function(res) {
            if (res.success) {
              self.domains = res.model;
            }
          });
        }
      },
      watch: {
        showNewBindingModal: function(value) {
          if (!value) {
            self.model.SubDomain = "";
          }
        }
      }
    });
  })();
</script>
